<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="dh">
			<view class="custom-nav">
				<!-- 图标 -->
				<uni-icons type="left" size="24" color="#fff" @click="goBack"></uni-icons>
				<!-- 标题 -->
				<text class="nav-title">车辆维修</text>
			</view>
		</view>
		<!-- 地图 -->
		<view class="dtmk">
			<map class="dt" name="修车" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
			<!-- 附近门店按钮 -->
			<view class="nearby-store-btn" @click="goToNearbyStores">
				<text>附近门店</text>
				<uni-icons type="right" size="16" color="#fff"></uni-icons>
			</view>
		</view>
		<!-- 店铺信息 -->
		<view class="dpxx">
			<!-- 店名和距离 -->
			<view class="dmhjl">
				<!-- 名字 -->
				<view class="mz">
					车百事汽车生活馆
				</view>
				<!-- 距离 -->
				<view class="jl">
					556m
				</view>
			</view>
			<!-- 详细内容 -->
			<view class="xxnr">
				<!-- 评分营业时间和位置 -->
				<view class="pfyysjhwz">
					<!-- 评分 -->
					<view class="pf">
						<view class="stars">
							<uni-icons 
								v-for="(item, index) in 5" 
								:key="index"
								:type="index < rating ? 'star-filled' : 'star'"
								:color="index < rating ? '#ffca3e' : '#d3d3d3'"
								size="18"
								class="star-item"
							></uni-icons>
						</view>
						<text class="rating-text">{{ rating }}分</text>
					</view>
					<!-- 营业时间 -->
					<view class="yysj">
						营业时间：周一至周五 早上8:00-晚上22:00
					</view>
					<!-- 位置 -->
					<view class="wz">
						位置：山阳区人民路与解放路交叉口
					</view>
				</view>
				<!-- 图片 -->
				<view class="tp">
					<image src="/static/repair/门店.png" mode=""></image>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="an">
				<!-- 联系门店 -->
				<view class="lxmd">
					<button @click="openContactSheet">
						<image src="/static/repair/电话@3x.png" mode="aspectFit" class="btn-icon" />
						<text>联系门店</text>
					</button>
				</view>
				<!-- 立即预定 -->
				<view class="ljyd">
					<button @click="goToAppointment">
						<image src="/static/repair/预约@2x.png" mode="aspectFit" class="btn-icon" />
						<text>立即预定</text>
					</button>
				</view>
			</view>
			<!-- 联系门店-底部弹出 -->
			<uni-popup ref="contactPopup" type="bottom" :safe-area="true">
				<view class="contact-sheet">
					<view class="sheet-item phone" @click="callPhone">{{ phone }}</view>
					<view class="sheet-item" @click="copyPhone">复制</view>
					<view class="sheet-item cancel" @click="closeContactSheet">取消拨号</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const latitude = ref(34.825817)
	const longitude = ref(113.55852)
	// 评分
	const rating = ref(4)
	// 联系方式
	const phone = ref('18642589456')
	const contactPopup = ref(null)
	// 地图标记点
	const markers = ref([
		{
			id: 1,
			latitude: 34.825817,
			longitude: 113.55852,
			iconPath: '/static/repair/位置 拷贝 6@3x.png',
			width: 30,
			height: 30,
			callout: {
				content: '车百事汽车生活馆',
				color: '#333',
				fontSize: 12,
				borderRadius: 4,
				bgColor: '#fff',
				padding: 5,
				display: 'ALWAYS'
			}
		},
		{
			id: 2,
			latitude: 34.830817,
			longitude: 113.56052,
			iconPath: '/static/repair/位置 拷贝 6@3x.png',
			width: 30,
			height: 30
		},
		{
			id: 3,
			latitude: 34.820817,
			longitude: 113.55652,
			iconPath: '/static/repair/位置 拷贝 6@3x.png',
			width: 30,
			height: 30
		},
		{
			id: 4,
			latitude: 34.835817,
			longitude: 113.56252,
			iconPath: '/static/repair/位置 拷贝 6@3x.png',
			width: 30,
			height: 30
		}
	])
	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}
	// 跳转到附近门店页面
	const goToNearbyStores = () => {
		uni.navigateTo({
			url: '/pages/repair/fjmd/index'
		})
	}
	
	// 跳转到预约页面
	const goToAppointment = () => {
		// 将门店信息存储到本地，供预约页使用
		const storeInfo = {
			id: 1,
			name: '车百事汽车生活馆',
			address: '山阳区人民路与解放路交叉口',
			phone: phone.value,
			rating: rating.value,
			latitude: latitude.value,
			longitude: longitude.value
		}
		uni.setStorageSync('appointmentStoreInfo', storeInfo)
		
		// 跳转到预约页面
		uni.navigateTo({
			url: '/pages/repair/fjmd/mdxq/ljyy/index'
		})
	}
	
	const openContactSheet = () => {
		contactPopup.value && contactPopup.value.open && contactPopup.value.open()
	}
	const closeContactSheet = () => {
		contactPopup.value && contactPopup.value.close && contactPopup.value.close()
	}
	const copyPhone = () => {
		uni.setClipboardData({
			data: phone.value,
			success: () => {
				uni.showToast({ title: '已复制', icon: 'none' })
				closeContactSheet()
			}
		})
	}
	const callPhone = () => {
		uni.makePhoneCall({ phoneNumber: phone.value })
	}
	//app实时定位
	const getPosition = () => {
		// console.log(99);
		uni.getLocation({
			type: 'wgs84',
			success: function(res) {
				console.log(res)
				console.log('当前位置的经度：', res.longitude)
				console.log('当前位置的纬度：', res.latitude)
				longitude.value = res.longitude;
				latitude.value = res.latitude;
			}
		})
	}
	//获取地址

	const choose = () => {

		// #ifdef H5

		navigator.geolocation.getCurrentPosition(

			position => {

				console.log(position.coords.latitude, position.coords.longitude);

				// 处理获取到的位置信息

				uni.chooseLocation({

					success(resp) {

						console.log(resp);

					}

				})

			},

			error => {

				console.error(error);

				// 处理错误

			}

		);

		// #endif



		// #ifndef H5

		uni.chooseLocation({

			success(resp) {

				console.log(resp);

			},

			fail(err) {

				console.error('选择位置失败：', err);

			}

		})

		// #endif

	}
	// 联系门店按钮

	// 当页面加载后立马执行
	onLoad(() => {
		getPosition()
	})
</script>

<style scoped>
	/* 导航和背景 */
	.dh {
		height: 400rpx;
		width: 100%;
		background-color: #3486fe;
	}

	.custom-nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 60rpx;
	}

	.nav-title {
		color: white;
		font-size: 35rpx;
		text-align: center;
		flex: 1;
		padding-right: 35rpx;
	}

	/* 地图模块 */
	.dtmk {
		position: absolute;
		top: 150rpx;
		width: 720rpx;
		height: 800rpx;
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		margin-left: 15rpx;
	}

	.dt {
		width: 680rpx;
		height: 780rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;
	}

	/* 附近门店按钮 */
	.nearby-store-btn {
		position: absolute;
		top: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(135deg, #ff7437 0%, #ff5722 100%);
		border-radius: 50rpx;
		padding: 20rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(255, 116, 55, 0.3);
		z-index: 10;
	}

	.nearby-store-btn text {
		color: #fff;
		font-size: 28rpx;
		font-weight: 500;
		margin-right: 10rpx;
	}

	/* 店铺详情 */
	.dpxx {
		position: absolute;
		top: 950rpx;
		width: 680rpx;
		background-color: white;
		height: 400rpx;
		padding: 0 35rpx;
		padding-top: 10rpx;
	}

	.dmhjl {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
	}

	.mz {
		font-size: 35rpx;
		font-weight: bold;
	}

	.jl {
		font-size: 25rpx;
		color: #4f90f5;
		margin-top: 10rpx;
	}

	.xxnr {
		display: flex;
		justify-content: space-between;
		padding-top: 5rpx;
	}

	/* 评分 */
	.pf {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.stars {
		display: flex;
		align-items: center;
	}

	.star-item {
		margin-right: 4rpx;
	}

	.rating-text {
		font-size: 20rpx;
		color: #999;
		padding-left: 10rpx;
	}

	/* 营业时间 */
	.yysj {
		font-size: 25rpx;
		padding-top: 10rpx;
	}

	/* 位置 */
	.wz {
		font-size: 25rpx;
		padding-top: 10rpx;
	}

	/* 图片 */
	.tp image {
		width: 180rpx;
		height: 120rpx;
	}

	/* 按钮 */
	.an {
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
	}

	/* 联系门店按钮 */
	/* uni-app 对 button 等原生组件的样式穿透支持有限 */
	/* 这两个按钮因为scoped 样式作用域问题,应用不上 所以要用深度选择器 */
	.lxmd ::v-deep button {
		border-radius: 50rpx;
		border: none;
		background-color: #4f90f5;
		color: white;
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.lxmd image {
		width: 35rpx;
		height: 35rpx;
		padding-right: 20rpx;
		vertical-align: middle;
	}

	/* 立即预定按钮 */
	.ljyd ::v-deep button {
		border-radius: 50rpx;
		border: none;
		background-color: #ff7437;
		color: white;
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.ljyd image {
		height: 35rpx;
		width: 35rpx;
		padding-right: 20rpx;
		vertical-align: middle;
	}

	/* 底部操作面板样式 */
	.contact-sheet {
		background-color: #fff;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.sheet-item {
		text-align: center;
		padding: 28rpx 0;
		font-size: 28rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.sheet-item.phone {
		font-size: 32rpx;
		font-weight: bold;
		border-top: none;
	}

	.sheet-item.cancel {
		color: #999;
	}
</style>